<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title> Goog_Eye </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    #l_pupil,
    #r_pupil {
        position: relative;
        width: 15px;
        height: 15px;
        left: 52px;
        top: 52px;
    }
    </style>
</head>

<body>
    <table cellpadding=0 cellspacing=0 border=0 align=center style="margin-top:20px;">
        <tr>
            <td background="eye-r.gif">
                <div style="width:117px;height:117px;">
                    <img src="pupil.gif" id="l_pupil" />
                </div>
            </td>
            <td background="eye-y.gif">
                <div style="width:117px;height:117px;">
                    <img src="pupil.gif" id="r_pupil" />
                </div>
            </td>
        </tr>
    </table>
    <script>
    var G_EYES = {
        ER: 57,
        PR: 7,
        MAX_D: 37,
        DOC: document.documentElement || document.body
    };

    G_EYES.STATCK = [], G_EYES.ID = function(id) { return document.getElementById(id); };

    G_EYES.M_Pos = function(e) {
        return { 
            left: e.clientX + G_EYES.DOC.scrollLeft, 
            top: e.clientY + G_EYES.DOC.scrollTop 
        };
    }

    G_EYES.O_pos = function(el) {
        var rect = el.getBoundingClientRect();
        
        return {
            left: rect.left + G_EYES.DOC.scrollLeft,
            top: rect.top + G_EYES.DOC.scrollTop
        };
    }

    G_EYES.init = function() {
        G_EYES.STATCK = [G_EYES.ID('l_pupil'), G_EYES.ID('r_pupil')];

        document.onmousemove = (e) => {
            G_EYES.mousemove(e || window.event);
        }
    };

    G_EYES.mousemove = (e) => {
        for (var i = 0, len = G_EYES.STATCK.length; i < len; i++) {
            var pupil = G_EYES.STATCK[i];
            var DF_X = G_EYES.M_Pos(e).left - G_EYES.O_pos(pupil.parentNode).left - G_EYES.PR,
                DF_Y = G_EYES.M_Pos(e).top - G_EYES.O_pos(pupil.parentNode).top - G_EYES.PR,
                DIT = Math.sqrt(Math.pow(DF_X, 2) + Math.pow(DF_Y, 2));
            
            if (DIT > G_EYES.MAX_D) {
                var scale = G_EYES.MAX_D / DIT;
                DF_X *= scale;
                DF_Y *= scale;
            }

            pupil.style.left = parseInt(DF_X + G_EYES.ER - G_EYES.PR) + 'px';
            pupil.style.top = parseInt(DF_Y + G_EYES.ER - G_EYES.PR) + 'px';
        }
    };

    G_EYES.init();
    </script>
</body>

</html>